<template>
	<div style="width: 100%">
		<ul :style="FieldItem?.attrs.style">
			<li
				v-for="(item, index) in FieldItem?.attrs.listContent"
				:key="index"
				class="navLi"
				:style="[FieldItem?.attrs.liStyle, { width: 100 / FieldItem?.attrs.rowSum + '%' }]"
			>
				<el-link :href="item.url" :underline="false" :target="item.mode === 'external' ? '_blank' : '_self'">
					{{ item.title }}
				</el-link>
				<span><img :src="formatSrc(item.icon)" /></span>
			</li>
			<div style="clear: both" />
		</ul>
	</div>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';
import { formatSrc } from '/@/utils/extendMethods';
const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem } = toRefs(props);

onMounted(() => {
	init();
});

const init = () => {
	FieldItem.value?.attrs.listContent.forEach((item: Record<string, any>) => {
		if (item.mode === 'inside') {
			item.url += getParams(item.params);
		}
	});
};

const getParams = (paramsList: any[]): string => {
	if (paramsList.length) {
		let param = '?';
		paramsList.forEach((item: Record<string, any>, index: number) => {
			param += item.name + '=' + calcFieldValue(4, item.value, props.inputData, props.pageData, props.globalData) + '&';
			if (index === paramsList.length - 1) {
				param = param.substring(0, param.length - 1);
			}
		});
		return param;
	} else {
		return '';
	}
};
</script>

<style lang="scss" scoped></style>
